<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/30
  Time: 21:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>商品详情页</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet"/>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <style>
        body {
            font-family: 宋体;
            margin: 0;
        }
        .content {
            width: 1000px;
            height: 800px;
            margin-top: 40px;
            margin: auto;
        }
        .new {
            width: 785px;
            height: 800px;
            border: 1px solid black;
            float: left;
        }

        .hot {
            width: 200px;
            height: 300px;
            border: 1px solid blue;
            float: right;
        }

        .new-text {
            width: 100%;
            height: 50px;
        }

        .new-text-left, .new-text-center {
            width: 100px;
            height: 100%;
            float: left;
        }

        .new-text-left {
            color: #EE7621;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            font-size: 18px;
        }

        .new-text-center {
            line-height: 50px;
            font-size: 12px;
            color: #A9A9A9;
        }

        .new-text-right {
            width: 100px;
            height: 100%;
            float: right;
            line-height: 50px;
            font-size: 12px;
            text-align: right;
            color: #EE7621;
        }

        .new-goodslist {
            width: 100%;
            height: 750px;
        }

        .new-goodslist-goods {
            width: 195px;
            height: 250px;
            float: left;
        }

        .new-goodslist-goods-img {
            width: 100%;
            height: 70%;
        }

        .new-goodslist-goods-name, .new-goodslist-goods-sellprice, .new-goodslist-goods-price {
            height: 10%;
            width: 100%;
            padding-left: 10px;
            font-size: 12px;
            line-height: 25px;
        }

        .new-goodslist-goods-sellprice {
            color: #8B0000;
        }

        .new-goodslist-goods-price {
            color: #848484;
        }

        .new-goodslist-goods-img img {
            width: 100%;
            height: 100%;
        }

        .new-goodslist-goods-sellprice span {
            font-weight: bold;
        }

        .new-goodslist-goods-price span {
            /* 中横线 */
            text-decoration: line-through;
        }

        .hot-title {
            width: 100%;
            height: 30px;
            border-bottom: 1px solid #848484;
            line-height: 30px;
            font-weight: bold;
            font-size: 15px;
            padding-left: 10px;
            box-sizing: border-box;
        }

        .hot-content {
            width: 100%;
            /* 后期高度可不设，更具内容调节 */
            height: 269px;
        }

        .hot-goods {
            width: 80px;
            height: 125px;
            float: left;
            margin: 5px 10px;
        }

        .hot-goods-img {
            width: 78px;
            height: 80px;
            border: 1px solid #848484;
        }

        .hot-goods-img > img {
            width: 100%;
            height: 100%;
        }

        .hot-goods-name, .hot-goods-price {
            width: 80px;
            height: 21px;
            text-align: center;
            font-size: 12px;
            line-height: 21px;
        }

        .hot-goods-name {
            font-size: 12px;
        }

        .hot-goods-price {
            color: darkr;
        }

        .hot-goods-price > span {
            font-weight: bold;
        }

        .detail {
            width: 1300px;
            height: 700px;
            margin-left: 350px;
        }

        .detail-left {
            width: 500px;
            height: 700px;
            float: left;

        }

        .detail-left-img {
            width: 460px;

        }

        .detail-right {
            width: 800px;
            height: 700px;
            float: left;
            font-size: 16px;
            color: #848484;
            border-collapse: collapse;
        }

        .detail-right1 {
            color: black;
            font-weight: bold;
            height: 50px;
            border-bottom: 1px dashed black;
        }

        .detail-right2 {
            height: 100px;
            padding-top: 10px;
            box-sizing: border-box;
            vertical-align: top;
        }

        .detail-right2-1 {
            font-size: 60px;
            line-height: 100px;
            color: #BA0505;

        }

        .detail-right3 {
            margin-top: 0px;
            height: 50px;
            line-height: 50px;
        }

        .detail-right3-1 {
            text-decoration: line-through;
        }

        .detail-right5 {
            margin-top: 0px;
            height: 60px;
        }

        .detail-right4 {
            margin-top: 0px;
            height: 220px;
            box-sizing: border-box;
        }

        .detail-right4-1 {
            height: 210px;
            width: 600px;
            border: 1px solid orangered;
            border-collapse: collapse;
            box-sizing: border-box;
        }

        .bt1 {
            width: 5px;
        }

        .detail-right4-1-1 {
            height: 70px;
        }

        .detail-right4-1-1-1, .detail-right4-1-2-1 {
            padding-left: 50px;
        }

        .detail-right4-1-2 {
            height: 140px;
        }

        .detail-righ4-2-2, .detail-righ4-2-3 {
            float: left;
            width: 200px;
            height: 70px;
            color: white;
            text-align: center;
            line-height: 70PX;
            border-radius: 5PX;
        }

        .detail-righ4-2-2 {
            background-color: #DA5412;
        }

        .detail-righ4-2-3 {
            margin-left: 20px;
            background-color: #0268A3;
        }

        .content_book {
            margin-top: 0px;
            width: 1300px;
            height: 700px;
            margin-left: 350px;
            box-sizing: border-box;
            border-collapse: collapse;
        }

        .content_book-left {
            float: left;
            margin-top: 0px;
            width: 320px;
            border: 1px solid #848484;
            box-sizing: border-box;
            border-collapse: collapse;
        }

        .content_book-left1 {
            height: 60px;
            background-color: #f9f9f9;
            color: #b45a01;
        }

        .comment-right {
            margin-top: 10px;
        }

        .content_book-left2 {
            height: 120px;
            border-bottom: 1px solid #848484;
        }

        .content_book-left2-1 {
            width: 100px;
        }

        .content_book-left2-2 {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal !important;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            width: 220px;
        }

        .content_book-img {
            height: 110px;
        }

        .content_book-div2 {
            color: red;
        }

        .content_book-right {
            float: right;
            width: 970px;
            height: 700px;
            padding-top: 0px;
            margin-top: 0px;
            margin-left: 30px;
            box-sizing: border-box;
            border-collapse: collapse;
            float: left;
        }

        .content_book-right1 {
            height: 60px;
            margin-top: 60px;
            margin-left: 20px;
        }

        .content_book-right2 {
            margin-top: 0px;
            height: 640px;
            text-align: left;
        }

        .detail-right5 img {
            width: 15px;
            height: 15px;
        }
    </style>
</head>
<body>
<%--商城logo--%>
<%@include file="headtop.jsp" %>
<%--商城分类--%>
<%@include file="headmid.jsp" %>
<%--搜索框引入--%>
<%@ include file="search.jsp" %>


<!-- 书籍展示界面 -->
<div class="detail">
    <table class="detail-left">
        <tr>
            <td><a title="${goods.name}" href="javascript:void(0)">
                <img class="detail-left-img" src="${pageContext.request.contextPath}/img/${goods.image}"
                     href="javascript:void(0)"/>
            </a></td>
        </tr>
    </table>
    <table class="detail-right">
        <%--        用于获取gid--%>
        <input id="gid" type="hidden" value="${goods.id}">
        <tr class="detail-right1">
            <td colspan="2">${goods.name}</td>
        </tr>
        <tr class="detail-right2">
            <td class="detail-right2-2">销售价:¥
                <font class="detail-right2-1">${goods.salesprice}</font>
            </td>
            <td class="detail-right2-2">图书编号：${goods.goodsno}</td>
        </tr>
        <tr class="detail-right3">
            <td colspan="2">市场价：
                <font class="detail-right3-1">¥${goods.marketprice}</font>
            </td>
        </tr>
        <tr class="detail-right3">
            <td colspan="2">作者：${goods.author}</td>
        </tr>
        <tr class="detail-right3">
            <td colspan="2">出版社：${goods.publisher}</td>
        </tr>
        <tr class="detail-right3">
            <td colspan="2">出版时间：${goods.uptime}</td>
        </tr>
        <tr class="detail-right3">
            <td colspan="2">库存：现货(${goods.stock})</td>
        </tr>
        <tr class="detail-right5">
            <td colspan="2">顾客评分：<img src="${pageContext.request.contextPath}/img/ChristmasStar.png"><img
                    src="${pageContext.request.contextPath}/img/ChristmasStar.png"><img
                    src="${pageContext.request.contextPath}/img/ChristmasStar.png"><img
                    src="${pageContext.request.contextPath}/img/ChristmasStar.png"><img
                    src="${pageContext.request.contextPath}/img/ChristmasStar.png">（已有10人评价）
            </td>
        </tr>
        <tr class="detail-right4">
            <td colspan="2">
                <table class="detail-right4-1">
                    <tr class="detail-right4-1-1">
                        <td class="detail-right4-1-1-1">
                            购买数量：<input type="text" value="1" id="buyNums"/>
                            <input type="button" class="bt1"/>
                            <input type="button" class="bt1"/>
                        </td>
                    </tr>
                    <tr class="detail-right4-1-2">
                        <td class="detail-right4-1-2-1">
                            <div class="detail-righ4-2-2">
                                <a href="javascript:void(0)" onclick="onpay()">
                                    立即购买
                                </a>
                            </div>
                            <div class="detail-righ4-2-3">
                                <a href="javascript:void(0)" onclick="joinCart()">
                                    加入购物车
                                </a>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
<!-- 书籍详情界面 -->
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md3">
            <table class="content_book-left">
                <tr class="content_book-left1">
                    <td class="content_book-left1-1">
                        热卖商品
                    </td>
                </tr>
                <c:forEach items="${ranklist}" var="goods" begin="0" end="9" varStatus="s">


                <tr class="content_book-left2">
                    <td class="content_book-left2-1">
                        <img class="content_book-img"
                             src="${pageContext.request.contextPath}/img/${goods.image}"/>
                    </td>
                    <td class="content_book-left2-2" >
                        ${goods.name}
                        <br/>
                        <font class="content_book-div2">¥${goods.salesprice}</font>
                    </td>
                </tr>
                </c:forEach>
                <%--<tr class="content_book-left2">
                    <td class="content_book-left2-1">
                        <img class="content_book-img"
                             src="${pageContext.request.contextPath}/img/${ranklist.goods.image}"/>
                    </td>
                    <td class="content_book-left2-2">
                        ${ranklist.goods.name}
                        <br/>
                        <font class="content_book-div2">¥${ranklist.goods.salesprice}</font>
                    </td>
                </tr>--%>
            </table>
        </div>

        <!-- 书籍详情右边介绍 -->
        <div class="layui-col-md8 layui-col-md-offset1 ">
            <table class="content_book-right">
                <div class="layui-tab layui-tab-card content_book-right1">
                    <ul class="layui-tab-title">
                        <li class="layui-this">商品详情</li>
                        <li>顾客评价(${commentList.total})</li>
                    </ul>
                    <div class="layui-tab-content " style="height: 600px;">
                        <div class="layui-tab-item layui-show " id="details">
                            ${goods.description}
                        </div>
                        <div class="layui-tab-item" >
                            <label class="layui-form-label">评论框</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" required  lay-verify="required" id="addcomment" placeholder="请添加评论" autocomplete="off" class="layui-input"><button class="layui-btn layui-btn-radius layui-btn-warm" onclick="addcomm(addcomment)">添加</button>
                              <%--  <table class="layui-table">
                                    <colgroup>
                                        <col width="150">
                                        <col width="200">
                                        <col>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>内容</th>
                                        <th>评分星级</th>
                                        <th>评论用户</th>
                                        <th>时间</th>
                                        <th>购买状态</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${commentList.list}" var="remark">
                                        <tr>
                                            <td> ${remark.content}</td>
                                            <td>${remark.score}</td>
                                            <td>  ${remark.user.username}</td>
                                            <td> ${remark.remarktime}</td>
                                            <td> ${remark.status}</td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>--%>
                            </div>
                     <%--       <div class="layui-row">
                            </div>--%>
                            <c:forEach items="${commentList.list}" var="remark">
                            <div class="layui-row">
                                <div class=" layui-col-md10">
                                    ${remark.content}
                                </div>
                                <div class="layui-col-md2">
                                    ${remark.score}
                                </div>
                                <div class="layui-col-md6" style="margin-top: 20px;">
                                    ${remark.user.username}
                                </div>
                                <div class=" layui-col-md3" style="margin-top: 20px;">
                                    ${remark.remarktime}
                                </div>
                                <div class="layui-col-md3" style="margin-top: 20px;">
                                    ${remark.status}
                                </div>
                                </c:forEach>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    </table>
</div>
</div>


<!-- 底栏属性 -->
<%@include file="helpinfo.jsp" %>
<!-- 尾栏 -->
<%@include file="footer.jsp" %>
</body>

<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
    //添加评论
    function addcomm(obj) {
        //获取gid     隐藏框获取
        let gid = $("#gid").val();
        //获取评论框内容
        let comm = $(obj).val();
        $.ajax({
            url: "${pageContext.request.contextPath}/goods/addcomment",
            type: "post",
            data: {
                goodsid: gid,
                comment: comm
            },
            dataType:"json",
            cache: false,
            success:function (data) {
                if(data.flag){
                    alert("添加成功");
                    window.location.reload();
                    // showComment();
                }else {
                    alert("添加失败");
                }
            }
            });
    }
    //立即购买
    function onpay() {
        joinCart();
        //先加入购物车后，跳转至购物车页面
        location.href="${pageContext.request.contextPath}/cart/findAllByUid";
    }
    //加入购物车
    function joinCart() {
        //获取gid     隐藏框获取
        let gid = $("#gid").val();
        //获取nums
        let nums = $("#buyNums").val();
        alert("已加入购物车！");
        // alert(gid+".."+nums);
        $.post("${pageContext.request.contextPath}/cart/joinCart", "gid=" + gid + "&nums=" + nums, function (data) {
        })
    }
</script>
</html>

